<template>
	<view class="pg">
		<view class="order" v-for="(item, index) in orderInfo" :key = "index">
			<view class="order_top">
				<view class="order_top_l">
					<image v-if="item.type == 1" src="../../static/image/mine/discount/integral.png" mode=""></image>
					<image v-else-if="item.type == 2" src="../../static/image/mine/discount/group.png" mode=""></image>
					<view class="ordernum">订单编号：{{item.orderNum}}</view>
				</view>
				<view class="">
					<view v-if="item.state == 0" class="orderstate">待付款</view>
					<view v-if="item.state == 1" class="orderstate">待发货</view>
					<view v-if="item.state == 2" class="orderstate">待收货</view>
					<view v-if="item.state == 3" class="orderstate">待成团</view>
					<view v-if="item.state == 4" class="orderstate">拼团失败</view>
					<view v-if="item.state == 5" class="orderstate">已完成</view>
				</view>
			</view>
			<view class="orderinfo" @tap="todetail(index,item)">
				<view class="orderinfo_l">
					<view class="orderinfo_pic"><image :src="item.src" mode="widthFix"></image></view>
					<view class="orderinfo_info">
						<view class="title">{{item.title}}</view>
						<view class="standard">{{item.standard}};{{item.weight}}</view>
					</view>
				</view>
				<view class="orderinfo_r">
					<view class="price">
						￥
						<text>{{item.price}}</text>
					</view>
					<view class="num">*{{item.num}}</view>
				</view>
			</view>
			<!-- 付款信息 -->
			<view class="paymessage" v-if="item.type != 1">
				实付：<text class="qian">￥</text><text>{{item.price * item.num}}</text>（含运费：免运费）
			</view>
			<view class="paymessage" v-else>
				兑换积分：<text >1200</text>/积分（含运费：免运费）
			</view>
			<view class="orderbtn" v-if="item.state == 0">
				<view class="orderbtn_i orderbtn_left">
					取消订单
				</view>
				<view class="orderbtn_i orderbtn_right">
					去支付
				</view>
			</view>
			<view class="orderbtn" v-if="item.state == 2 || item.state == 5">
				<view class="orderbtn_i orderbtn_left" @tap="tologistics(index)" >
					查看物流
				</view>
				<view class="orderbtn_i orderbtn_right" 
				v-if="item.state == 2">
					确认收货
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data () {
			return {
				// type 订单类型 state 订单状态 standard 规格
					orderInfo: [
						{
							type: '1',
							integralnum: '1200',
							orderNum: 216467441,
							state: '0',
							src: '../../static/image/mine/discount/product01.png',
							title: '临潼石榴老树红石榴新鲜包邮应季甜水果3-10斤',
							standard: '70mm含-75mm',
							weight : '500g',
							price: '7.8',
							num: 2
						},
						{
							type: '2',
							integralnum: '1200',
							orderNum: 216467441,
							state: '1',
							src: '../../static/image/mine/discount/product02.png',
							title: '临潼石榴老树红石榴新鲜包邮应季甜水果3-10斤',
							standard: '70mm含-75mm',
							weight : '500g',
							price: '7.8',
							num: 2
						},
						{
							integralnum: '1200',
							orderNum: 216467441,
							state: '2',
							src: '../../static/image/mine/discount/product01.png',
							title: '临潼石榴老树红石榴新鲜包邮应季甜水果3-10斤',
							standard: '70mm含-75mm',
							weight : '500g',
							price: '7.8',
							num: 2
						},
						{	
							type: '2',
							integralnum: '1200',
							orderNum: 216467441,
							state: '3',
							src: '../../static/image/mine/discount/product02.png',
							title: '临潼石榴老树红石榴新鲜包邮应季甜水果3-10斤',
							standard: '70mm含-75mm',
							weight : '500g',
							price: '7.8',
							num: 2
						},
						{	
							type: '2',
							integralnum: '1200',
							orderNum: 216467441,
							state: '4',
							src: '../../static/image/mine/discount/product01.png',
							title: '临潼石榴老树红石榴新鲜包邮应季甜水果3-10斤',
							standard: '70mm含-75mm',
							weight : '500g',
							price: '7.8',
							num: 2
						},
						{
							integralnum: '1200',
							orderNum: 216467441,
							state: '5',
							src: '../../static/image/mine/discount/product02.png',
							title: '临潼石榴老树红石榴新鲜包邮应季甜水果3-10斤',
							standard: '70mm含-75mm',
							weight : '500g',
							price: '7.8',
							num: 2
						}
					]
			}
		},
		methods: {
			todetail (key,item) {
				this.$emit('todetail', {key:key,content:item})
			},
			tologistics (key) {
				this.$emit('tologistics',key)
			}
		}
	}
</script>

<style lang="less" scoped>

.order {
	width: calc(100% - 60upx);
	margin: auto;
	margin-top: 20upx;
	padding: 25upx 15upx;
	box-sizing: border-box;
	background-color: #ffffff;
}
.order_top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	.order_top_l {
		display: flex;
		align-items: center;
		image {
			width: 72upx;
			height: 36upx;
			margin-right: 10upx;
		}
		.ordernum {
			font-size: 28upx;
			color: #333333;
		}
	}
	.orderstate {
		color: #f73e2f;
		font-size: 28upx;
	}
}
.orderinfo {
	width: 100%;
	height: 120upx;
	margin-top: 25upx;
	display: flex;
	// align-items: center;
	justify-content: space-between;
	.orderinfo_l {
		display: flex;
		align-items: center;
		// justify-content: space-between;
		.orderinfo_pic {
			width: 120upx;
			height: 120upx;
			border: 2upx solid #e1e1e1;
			border-radius: 20upx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: center;
			image {
				width: 104upx;
				height: 104upx;
			}
		}
		.orderinfo_info {
			margin-left: 30upx;
			.title {
				width: 350upx;
				font-size: 24upx;
				color: #333333;
				line-height: 40upx;
			}
			.standard {
				font-size: 24upx;
				color: #999;
				margin-top: 10upx;
			}
		}
	}
	.orderinfo_r {
		.price {
			font-size: 24upx;
			color: #333333;
			
			text {
				font-size: 28upx;
				font-weight: bold;
			}
		}
		.num {
			font-size: 24upx;
			color: #999999;
			text-align: right;
		}
	}
}
.paymessage {
	margin-top: 20upx;
	font-size: 24upx;
	color: #999999;
	text-align: right;
	text {
		color: #333333;
		font-size: 28upx;
		font-weight: bold;
	}
	.qian {
		color: #333333;
		font-size: 24upx;
	}
}
.orderbtn {
	margin-top: 15upx;
	display: flex;
	justify-content: flex-end;
	.orderbtn_i {
		width: 160upx;
		height: 46upx;
		text-align: center;
		line-height: 46upx;
		border-radius: 8upx;
		font-size: 24upx;
	}
	.orderbtn_left {
		border: 2upx solid #E1E1E1;
		box-sizing: border-box;
		color: #666666;
		margin-right: 10upx;
	}
	.orderbtn_right {
		background-color: #f73e2f;
		color: #FFFFFF;
	}
}
</style>
<style>
page {
	overflow: hidden;
	background-color: #f8f8f8;
	min-height: 100%;
}
</style>
